<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>

      <el-col :span="12" :xs="24">
        <el-form :model="loginForm" class="login_form">
          <h1>Hello</h1>
          <h2>Welcome Range Center</h2>
          <el-form-item>
            <el-input v-model="loginForm.username" :prefix-icon="User" />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="loginForm.password"
              show-password
              :prefix-icon="Lock"
              type="password"
              @keyup.enter.native="login"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
            <span style="color: #e0e3ea;">tips：平台管理员admin 系统管理员system，密码1</span>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import useUserStore from "@/store/module/user";
// import {reqLogin} from '@/api/index'
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";

let loginForm = reactive({ username: "", password: "" });
let useStore = useUserStore();
// 获取路由器
let $router = useRouter();
// const login = () => {
//     // reqLogin(loginForm)
//     useStore.userLogin(loginForm).then()
// }
const login = async () => {
  try {
    // 打印查询result的值
    // let result = await useStore.userLogin(loginForm);
    // console.log(result)
    await useStore.userLogin(loginForm);
    $router.push("/");
    ElNotification({
      type: "success",
      message: "登陆成功"
    });
  } catch (error) {
    ElNotification({
      type: "error",
      message: error.message
    });
  }
};
</script>

<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/background.jpg") no-repeat;
  // background-size: 100%;
  background-size: cover; //效果一样 没研究区别

  .login_form {
    position: relative;
    top: 30vh;
    width: 80%;
    padding: 40px;
    background: url("@/assets/images/login_form.png") no-repeat;
    background-size: cover;
    h1 {
      color: #fff;
      font-size: 40px;
    }
    h2 {
      margin: 20px 0;
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>